<template>
  <div class="list-container">
    <el-form class="search-panel" v-model="formData" :inline="true">
      <el-form-item label-width="90px" class="search-input" label="成员账号:"  prop="name" >
        <el-input v-model="formData.enterpriseName" 
        placeholder="请输入成员账号"
        @clear="onSubmit()"
        style="width: 250px"
        clearable
        ></el-input>
      </el-form-item>
      <!-- <el-form-item prop="department" >
        <el-select v-model="formData.roleName" placeholder="请选择所属部门">
          <el-option
            v-for="item in roleLists"
            :key="item.id"
            :label="item.roleName"
            :value="item.roleName">
          </el-option>
        </el-select>
      </el-form-item> -->
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
    <div class="table-panel">
      <el-row class="table-operate">
        <el-button type="primary" @click="addUser()" icon="el-icon-plus">添加成员</el-button>
        <!-- <el-select v-model="value" placeholder="排序方式">
          <el-option label="按时间" value="accordingtoTime"> </el-option>
          <el-option label="按姓氏" value="accordingtoName"> </el-option>
        </el-select> -->
      </el-row>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column
          label="序号"
          width="55"
          align="center"
          type="index">
          <!-- <template slot-scope="scope">
            {{ (page - 1) * limit + scope.$index + 1 }}
          </template> -->
        </el-table-column>
        <el-table-column prop="username" min-width="80" label="成员账号" align="center">
        </el-table-column>
        <el-table-column prop="nickName" min-width="80" label="姓名" align="center">
        </el-table-column>
        <el-table-column prop="roleName" min-width="80" label="角色名称" align="center">
        </el-table-column>
        <el-table-column prop="companyName" min-width="140" label="所属劳务公司" align="center">
        </el-table-column>
        <el-table-column prop="email" min-width="140" label="邮箱地址" align="center">
          <template slot-scope="scope">
            {{scope.row.email?scope.row.email:'----'}}
          </template>
        </el-table-column>
        <el-table-column prop="createBy" min-width="80" label="操作人" align="center">
        </el-table-column>
        <el-table-column prop="createTime" min-width="110" label="添加时间" align="center">
        </el-table-column>
        <!-- <el-table-column prop="updateTime" min-width="110" label="最后登录" align="center">
        </el-table-column> -->
        <!-- <el-table-column label="是否启用" width="100px" align="center">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.isDeleted"
              active-color="#13ce66"
              @change="changeEnable(scope.row)"
            >
            </el-switch>
          </template>
        </el-table-column> -->
        <!--操作-->
        <el-table-column label="操作" min-width="130" fixed="right" fit align="center">
          <template align="center" slot-scope="scope">
            <router-link :to="'/system/edit/'+scope.row.id">
            <el-button type="text" icon="el-icon-edit">修改</el-button>
            </router-link>
            <el-button
              icon="el-icon-delete"
              type="text"
              @click="delTenant(scope.row.id)"
            >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-row class="page">
        <div class="page-tag">
            共{{ Math.ceil(total / limit) }}页/{{ total }}条数据
        </div>
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 40, 50, 60, 70, 80]"
          :page-size="limit"
          layout="sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </el-row>
    </div>
    <el-dialog
      title="修改"
      :visible.sync="OptionChange"
      width="30%">
      <span>修改修改修改修改</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="OptionChange = false">取 消</el-button>
        <el-button type="primary" @click="OptionChange = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import tenantApi from "@/api/tenant";
export default {
  data() {
    return {
      OptionChange: false,
      total:0,
      value: {},
      currentPage: 1,
      valuedate: "",
      message: "",
      category:'2',
      isAdmin:'0',   //0-非超管账号，1-超管账号
      limit:10,
      formData: {}, // 查询表单对象
      tableData: [
        {
          // account: "admin1",
          // name: "张三",
          // companyName:'',
          // emailAddress: "admin1@qq.com",
          // characterName: "考勤核查1部",
          // operator: "李四",
          // startTime: "2019/11/12 13:00",
          // lastLogin: "2019/11/12 13:00",
          // valueswitch: true,
        }
      ],
      roleLists:[{
        id:'',
        roleName:'',
        companyName:''
      }],
    };
  },
  created() {
    this.fetchData()
    //获取下拉框的角色列表
    this.getTenantRoleList()
  },
  methods: {
    onSubmit(){
      //根据成员账号/姓名模糊查询
      this.fetchData()
    },
    getTenantRoleList() {
      tenantApi.getTenantRoleList(3).then(res=>{
        this.roleLists=res.data.roleLists
      })
    },
    editTenant(id){
      // console.log("+++=")
      this.$router.push({ path: '/projectTenant/update/'+id})
    },
    delTenant(id) {
      this.$confirm("是否确认删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          tenantApi.deleteByIds(id).then((res) => {
            if (res.code === 200) {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              this.fetchData()
            }
          }).catch(err => {
            this.$message({
              type: "error",
              message: err,
            });
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    addUser(){
      this.$router.push({ path: '/system/add'})
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.limit = val
      this.fetchData()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val
    },
    fetchData() {
      console.log("-------")
      tenantApi.getTenantList(this.currentPage, this.limit, this.category, this.isAdmin,this.formData).then(
        response => {
          this.tableData = response.data.items

          console.log(this.tableData);
          this.total = response.data.total
          // 数据加载并绑定成功
          this.listLoading = false
        }
      )
    },
  },
};
</script>
